<template>
  <div>
    <el-dialog title="个人信息" width="20%" :visible.sync="dialogVisible">
      <el-form :model="userForm" label-width="80px">
        <el-row style="text-align: center">
          <el-image
            style="width: 150px; height: 150px"
            :src="config.baseConfig.photoBaseUrl + userForm.avatarUrl"
            fit="fit">
            <div slot="error" class="image-slot">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </div>
          </el-image>
          <input type="file" v-show="false" ref="upload" @change="changeImage($event)">
        </el-row>
        <el-row style="text-align: center">
          <el-button size="mini" @click="clickUpload()">更换</el-button>
        </el-row>
        <el-form-item label="登录名: ">
          {{userForm.loginName}}
        </el-form-item>
        <el-form-item label="用户名: ">
          <el-input v-model="userForm.userName"></el-input>
        </el-form-item>
        <el-row style="text-align: center">
          <el-button @click="updateUserInfo()" type="primary">保存</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import blobToDataURL from '../../js/blobToDataURL';
  export default {
    name: "userInfo",
    props: {
      parentGetUserInfo: {
        type: Function,
        default: null
      }
    },
    data() {
      return {
        dialogVisible: false,
        userForm:{
          loginName: "loginName",
          userName: "userName",
          avatarUrl: "/live-chat/pic/headPortrait.png"
        }
      };
    },
    mounted () {
      // 初始化
      this.init()
    },
    methods: {
      init() {
      },
      async getUserInfo() {
        const paramObj = {userId: this.$cookieStore.getCookie("userId")};
        const result = await this.$api.user.info(paramObj);
        if (result.code === 0) {
          this.userForm = result.data;
        } else {
          this.$message.error(result.msg);
        }
      },
      changeDialogVisible() {
        this.dialogVisible = !this.dialogVisible;
        if (this.dialogVisible) {
          this.getUserInfo();
        }
      },
      clickUpload() {
        this.$refs.upload.click();
      },
      changeImage(e) {
        const file = e.target.files[0];
        if (file) {
          blobToDataURL(file).then(base64 =>{
            base64 = base64.replace(/^data:image\/\w+;base64,/, "");
            this.uploadPic(file.name, base64).then(url => {
              if (url) {
                this.userForm.avatarUrl = url;
              }
            });
          })
        }
      },
      async uploadPic(fileName, file) {
        const paramObj = {fileName: fileName, file:file};
        const result = await this.$api.user.uploadPic(paramObj);
        if (result.code === 0) {
          return result.data.filePath;
        } else {
          this.$message.error(result.msg);
        }
        return null;
      },
      async updateUserInfo() {
        const paramObj = Object.assign({}, this.userForm);
        paramObj.userId = this.$cookieStore.getCookie("userId");
        const result = await this.$api.user.updateUserInfo(paramObj);
        if (result.code === 0) {
          this.$message.success(result.msg);
          this.parentGetUserInfo();
        } else {
          this.$message.error(result.msg);
        }
      }
    }
  }
</script>

<style scoped>

</style>
